<style lang='less' >
.marginLeft20{
  .el-form-item__content{
    margin-left: 20px !important;
  }
}
 


</style>

<template>
  <div class="addCouponPage">

    <el-form :model="formData" :rules="rules" ref="formData" label-width="120px" class="demo-ruleForm">
      <el-form-item label="名称" prop="name">
        <el-input v-model.trim="formData.name" class="g-formInputWidth" placeholder='请输入体验金名称' ></el-input>
      </el-form-item>

      <el-form-item label="面值" prop="faceValue">
        <el-input v-model.number.trim="formData.faceValue" class="g-formInputWidth" :min="0" type='number' placeholder='请输入面值数量'></el-input>
      </el-form-item>

       <el-form-item label="发放数量" prop="issueCount">
        <el-input-number v-model.number.trim="formData.issueCount" type="number" :min="0" ></el-input-number>
      </el-form-item>

      <el-form-item label="领取限制方式" prop="limitType" class="g-inlineBox">
        <el-select v-model="formData.limitType" placeholder="请选择">
          <el-option
            v-for="item in limitType"
            :key="item.name"
            :label="item.value"
            :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
     
      <span v-if='formData.limitType && formData.limitType != "NO_LIMIT"'> &nbsp;&nbsp;&nbsp;&nbsp;- </span>
      <el-form-item prop="limitNum" class="g-inlineBox marginLeft20" v-if='formData.limitType && formData.limitType != "NO_LIMIT"'>
        <el-input v-model.number="formData.limitNum" type='number' placeholder='请输入限制领取数量'></el-input>
      </el-form-item>

      <el-form-item  label="领取时间" prop="vScopedate" >
         <el-date-picker
          v-model="formData.vScopedate"
          type="daterange"
          @change='chocieScopeDate'
          style="width: 425px;"
          :picker-options="pickerDateRangeOptions"
          placeholder="选择时间范围">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="过期类型" prop="expireType" class="g-inlineBox">
        <el-select v-model="formData.expireType" placeholder="请选择">
          <el-option
            v-for="item in expireType"
            :key="item.name"
            :label="item.value"
            :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
     
      <span v-if='formData.expireType' > &nbsp;&nbsp;&nbsp;&nbsp;- </span>
      <el-form-item key='expireDate' prop="vExpireDate" class="g-inlineBox marginLeft20" v-if='formData.expireType && formData.expireType =="FIXED_DATE" '>
        <el-date-picker
          v-model="formData.vExpireDate"
          type="datetime"
          format
          @change='chocieExpireDate'
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item key='expireDays' prop="expireDays" class="g-inlineBox marginLeft20" v-if='formData.expireType && formData.expireType =="ACTIVE_DAYS" '>
        <el-input v-model.number="formData.expireDays" type='number' :min="0" placeholder='最多4位数字，包含领取当天'></el-input>
      </el-form-item>

      <el-form-item prop="remark" label='描述'>
        <el-input
        type="textarea"
        class="g-formInputWidth"
        :rows="3"
        placeholder="请输入描述"
        v-model="formData.remark">
        </el-input>
      </el-form-item>

      <el-form-item prop="subRemark" label='扩展描述'>
        <el-input
        type="textarea"
        class="g-formInputWidth"
        :rows="3"
        placeholder="请输入描述"
        v-model="formData.subRemark">
        </el-input>
      </el-form-item>

       <el-form-item>
        <el-button type="primary" @click="submitForm('formData')">提交</el-button>
      </el-form-item>






    </el-form>


  </div>
</template>

<script>
  import {getCouponLimitType, getCouponExpireType, postCouponNew} from 'api/coupon/index.js'
  import {formRules, pickerDateRangeEndTime} from '../config.js'
    export default {
      components:{
      },
      data(){
        return{
          titleMsg:['卡券管理','卡券列表','创建卡券','体验金'],
          stepArr:['选择卡券类型','完成创建'],
          type:'',
          limitType:[],//领取限制类型
          expireType:[],//过期类型
          pickerDateRangeOptions:pickerDateRangeEndTime,//领取结束时间不能晚于2037年，不然数据库报错
          rules:formRules,//判断规则
          formData:{//表单数据
            name:'',//名称
            faceValue:null,//面值
            issueCount:null,//发放数量
            limitType:'',//领取限制方式 NO_LIMIT:无限制 , TOTAL_LIMIT:账号领取限制 , DAY_LIMIT:每日领取限制 , ORDER_LIMIT:订单领取限制
            limitNum:'',//领取限制数量
            vScopedate:[],//v-model
            takeDateStarted:'',//领取开始时间
            takeDateEnd:'',//领取结束时间
            expireType:'',//过期类型 FIXED_DATE:固定日期过期 , ACTIVE_DAYS: 指定天数过期
            vExpireDate:null,//v-model
            expireDate:'',//固定过期日期
            expireDays:'',//指定天数过期
            remark:'',//描述
            subRemark:'',//扩展描述
          },
        }
      },
      methods:{
        chocieScopeDate(value){
          this.formData.takeDateStarted = value && value.length >1 ?value.slice(0, 10).trim() + ' 00:00:00' :'';
          this.formData.takeDateEnd = value && value.length > 1 ?value.slice(13,value.length).trim()  + ' 23:59:59': '';
        },
        chocieExpireDate(value){
          this.formData.expireDate = value;
        },
        submitForm(formName){
          console.log('data', this.formData)
          this.$refs[formName].validate((valid) => {
            console.log(valid)
            if (valid) {
              console.log('submit!', this.formData);
              this.postCouponNew(this.formData)
            } else {
              console.log('error submit!!');
              return false;
            }
          })
        },
        async getCouponLimitType(){
          try{
            let back = await getCouponLimitType()
            back = back.data;
            console.log('getCouponLimitType 查询限制方式！',back)
            if(back.resultCode == '200'){
              this.limitType = back.result ? back.result :[];
            }

          }catch(err){
            console.error(err)
          }
        },
        async getCouponExpireType(){
          try{
            let back = await getCouponExpireType()
            back = back.data;
            console.log('getCouponExpireType =>',back)
            if(back.resultCode == '200'){
              this.expireType = back.result ? back.result :[];
            }

          }catch(err){
            console.error(err)
          }
        },
        async postCouponNew(data){
          try{
            let back = await postCouponNew(data,'EXPERIENCE_MONEY')
            back = back.data;
            console.log('postCouponNew =>',back)
            this.$alert(back.msg,{
              callback:action=>{
                if(back.resultCode == '200'){
                  this.$router.push({name:'couponList'})
                }
              }
            })
          }catch(err){
            console.error(err)
          }
        },
       
      },
      created(){
        this.$emit('setTitleMsg', this.titleMsg)
        this.$emit('setStepsArr', this.stepArr)
        this.$emit('setStepActive', 2)

        

      },
      mounted(){
        this.getCouponLimitType()
        this.getCouponExpireType()
        

      },
    }
</script>